<template>
  <div class="task-main">
    <div class="nav-back-header">
      <div class="back-title">
        <div class="back-button">
          <img
            class="back-cover"
            src="@/assets/images/arrow-left.png"
            @click="onNavigationBack()"
          />
        </div>
        <strong>自动任务</strong>
      </div>
    </div>
    <div class="task-card">
      <div class="search-form-wrap">
        <el-button type="primary" size="small" plain @click.stop="onNavigationTo('/single/add-group-friend/add-auto')">
          <i class="el-icon-plus"></i>
          新建任务
        </el-button>
        <div class="flex-rows">
          <el-input
            placeholder="搜索任务名称"
            v-model="queryParams.taskname"
            size="small"
            class="x-input-select"
            style="width:240px"
            @keyup.enter.native="handleQuery"
          >
            <el-button
              slot="append"
              size="small"
              icon="el-icon-search"
            ></el-button>
          </el-input>
          <!-- <el-input class="search-input" size="small" placeholder="搜手机号" suffix-icon="el-icon-search" style="width: 218px;"/> -->
          <el-date-picker
            v-model="queryParams.value1"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-select
            v-model="queryParams.value"
            size="small"
            placeholder="任务状态"
            style="width: 100px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <el-table :data="dataSource" stripe style="width: 100%">
        <el-table-column prop="name" label="任务名称">
          <template slot-scope="scope">
            <span>
              {{scope.row.name}}
              <span class="orangetag br_4 f-12 c_fff">新群</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="datetime" label="所选群"> 
          <template slot-scope="scope">
            <div class="flex flexwrap">
              <span style="line-height:32px"> 已选：{{scope.row.id}}</span>
              <div class="groupimgbox br_4">
                <img
                  src="https://cdn-qyb-hz.wxb.com/public/wechatdata/avatar/5424982/e0956eb16bf6ffa4e3123799e3c31ae3.png"
                  alt=""
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="触发规则">
          <template slot-scope="scope">
            {{scope.row.id}}入群20分钟自动加好友	
          </template>
        </el-table-column>
        <el-table-column prop="status" label="最后操作时间">
          <template slot-scope="scope">
            {{scope.row.id}}2024-05-27 09:48
          </template>
        </el-table-column>
        <el-table-column prop="status" label="任务状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :inactive-value="0"
              :active-value="1"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="option" label="操作">
          <el-button type="text" @click="getView">详情</el-button>
          <el-button type="text" class="mr-10">编辑</el-button>
          <el-popconfirm
            title="确定删除？"
            @confirm='handleDelete(scope.row)'
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
          <!-- <el-button type="text">删除</el-button> -->
        </el-table-column>
      </el-table>
    </div>
    <viewAutoTask
      v-if="showViewAutoTask"
      :visableIf.sync="showViewAutoTask"
    ></viewAutoTask>
  </div>
</template>
<script>
export default {
  components: {
    viewAutoTask: () => import("./viewAutoTask.vue"),
  },
  data() {
    return {
      showViewAutoTask: false,
      queryParams: {},
      options: [
        {
          value: "1",
          label: "开启",
        },
        {
          value: "2",
          label: "关闭",
        },
      ],
      value: "",
      value1: "",
      dataSource: [
        {
          name: "加群任务测试",
          status:1
        },
      ],
    };
  },
  methods: {
    getView() {
      this.showViewAutoTask = true;
    },
    onNavigationBack() {
      this.$router.go(-1);
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },

    handleDelete(){},
  },
};
</script>
<style lang="scss" scoped>
.task-main {
  .nav-back-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;

    .back-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;

      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-right: 12px;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        cursor: pointer;

        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .task-card {
    padding: 12px;

    .search-form-wrap {
      background: #ffffff;
      padding: 12px;
      background-color: #fff;
      border-left: 1px solid #e9e9e9;
      border-right: 1px solid #e9e9e9;
      display: flex;
      justify-content: space-between;

      .flex-rows {
        display: flex;
        gap: 8px;
      }
    }
  }
}
.orangetag {
  background-color: rgb(255, 105, 0);
  margin-left: 5px;
  padding: 5px 7px;
}
.groupimgbox {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-right: 5px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
.task-main .table-header-class {
  background-color: #f7f7f7;
  font-weight: 400;
  font-size: 14px;
  padding: 9px 13px;
}

.task-main .table-header-row-class th {
  border-bottom: 0px !important;
}

.task-main .el-table::before {
  height: 0;
}

.task-main .table-row-class td {
  border-bottom: 0px !important;
}

.task-main .table-row-class {
  height: 64px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #e9e9e9;
}

.task-main .el-table__empty-block {
  height: 250px;
  background-image: url("../../../../../assets/images/ic_table_empty_1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 47px;
  padding-top: 25px;
  padding-bottom: 70px;
  border: none;

  span {
    position: relative;
    top: 60px;
    font-size: 14px;
    color: #d9d9d9;
  }
}
</style>
